<!-- <template>
	<view>
		<camera id="face" :device-position="bbbbb" flash="off" style="width: 100%; height: 400px;" frame-size="medium"></camera>
		<u-button type="primary" shape="square" @click="kaishi()">绑定</u-button>
		<u-button type="primary" shape="square" @click="awitch()">旋转</u-button>
	</view>
</template> -->
<template>
	<view class="page-content">
		<view class="containerV">
			<!-- 标题 -->
			<view class="headerV">
				<view class="top-tips1">
					<view>请看摄像头</view>
				</view>
			</view>
			<!-- 拍摄区域 -->
			<view class="contentV">
				<view class="mark"></view>
				<image class="image" v-if="tempImg" mode="widthFix" :src="tempImg" />
				<camera v-if='cameraListen' :device-position="bbbbb" class="camera" flash="off" resolution='high' />
			</view>
			<!-- 操作区域 -->
			<view class="footerV">
				<view style="width: 100%;">
					<view v-if="!tempImg" style="width: 100%;">
						<view class="take-photo-bgV">
							<!-- 关闭摄像头 -->
							<view v-show="true" class="btn-change-upload" @click="handcameraListen()" />
							<!--拍照-->
							<view class="btn-take-photo" @click="kaishi()" />
							<!-- 切换镜头 -->
							<view class="btn-change-camera" @click="awitch()" />
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cameraListen :true,
				flag: true,
				frameQueue: [],
				bbbbb:"front",
				a:1,
				b:1
			};
		},
		onLoad() {
		},
		onShow() {
			this.cameraListen=true
		},
		onHide() {
			if(this.b%2==1){
				this.handcameraListen()
			}
			this.b=1
			this.a=1
		},
		onReady() {
		},
		methods:{
			async kaishi(){
				const context=uni.createCameraContext();
				const photo=context.takePhoto({
					async success(res) {
						console.log(res);
						const tempFilePaths = res.tempImagePath
						console.log(tempFilePaths);
						    // 接下来我们要读取这个文件，并转换为 Base64 编码的字符串  
						    const data= wx.getFileSystemManager().readFile({  
						      filePath: tempFilePaths,  
						      encoding: 'base64',  
						      success: async (res) => {  
						        const base64Str = res.data  
						        // console.log(base64Str) // 这就是你的 Base64 编码的字符串  
								const id=uni.getStorageSync('id');
								console.log(id);
								const {data:ris} =await uni.$http.post('/faceAuth',{
									base64Str,
									id,
									})
								console.log(ris);
								if(ris.code!==200) return uni.$showMsg("人脸录入失败",1500)
								// uni.stopCamera();
								return uni.$showMsg("人脸录入成功",1500)
						      },  
						      fail: (err) => {  
						        console.error(err)  
						      }  
						      });
					},
					fail() {
						console.log("失败");
					}
				})
				// console.log(photo);
			},
			awitch(){
				if(this.a%2!==0){
					this.bbbbb="back"
				}else{
					this.bbbbb="front"
				}
				this.a++
			},
			handcameraListen(){
				if(this.b%2!==0){
					this.cameraListen=false
				}else{
					this.cameraListen=true
				}
				this.b++
			}
		}
	}
</script>

<style lang="scss">
	page {
			height: 100%;
			width: 100%;
		}
	
		.page-content {
			width: 100%;
			height: 100%;
	
			.containerV {
				width: 100%;
				height: 100%;
				display: flex;
				flex-direction: column;
	
				/* 标题 */
				.headerV {
					padding: 163rpx 0 56rpx;
					text-align: center;
	
					.top-tips1 {
						color: #333333;
						font-size: 42rpx;
					}
				}
	
				/* 拍摄区域 */
				.contentV {
					position: relative;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					width: 564rpx;
					height: 564rpx;
					border-radius: 50%;
					margin: 0 auto;
					border: 10rpx solid #1568E0;
					background-color: #d8d8d8;
	
					.camera {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
	
					.mark {
						position: absolute;
						left: 0;
						top: 0;
						z-index: 1;
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
	
					.image {
						position: absolute;
						width: 100%;
						height: 100%;
						z-index: 3;
						border-radius: 50%;
					}
				}
	
				/* 操作按钮 */
				.footerV {
					width: 100%;
					flex-grow: 1;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: center;
	
					.privacyV {
						padding-top: 30rpx;
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: center;
	
						.text {
							font-size: 30rpx;
							color: #1C1C1C;
							text-align: center;
							line-height: 42rpx;
							margin-left: 15rpx;
	
							text {
								font-size: 30rpx;
								color: #00AAFF;
								text-align: center;
								line-height: 42rpx;
							}
						}
					}
	
					.bottom-tips-2 {
						margin-top: 20rpx;
						color: #999999;
						text-align: center;
						font-size: 26rpx;
					}
	
					.take-photo-bgV {
						width: 100%;
						margin-top: 30rpx;
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: center;
	
						// 由于左边没有按钮，所以左边要便宜更大，以便是拍照按钮居中
						.btn-take-photo {
							margin: 0rpx 80rpx 0rpx 80rpx;
							width: 196rpx;
							height: 196rpx;
							background: url("/static/img/zhaoxiangji1.png") no-repeat;
							background-size: 100% auto;
						}
	
						.btn-change-upload {
							left: 130rpx;
							width: 80rpx;
							height: 80rpx;
							background: url("/static/img/tuichu.png") no-repeat;
							background-size: 100% auto;
						}
	
						.btn-change-camera {
							right: 130rpx;
							width: 80rpx;
							height: 80rpx;
							background: url("/static/img/shuaxin1.png") no-repeat;
							background-size: 100% auto;
						}
					}
	
					.confirmV {
						margin: 200rpx 100rpx 0rpx 100rpx;
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: space-between;
	
						.btn-cancel {
							font-size: 32rpx;
							color: #1C1C1C;
						}
	
						.btn-ok {
							font-size: 32rpx;
							color: #00AAFF;
						}
					}
				}
			}
		}

</style>


// 	export default {
// 		data() {
// 			return {
// 				cameraListen :'',
// 				flag: true,
// 				frameQueue: []
// 			};
// 		},
// 		onLoad() {
// 			uni.authorize({
// 			    scope: 'scope.camera',
// 			    success() {
// 			        console.log("请求摄像头成功");
// 			    }
// 			})
// 			const context = wx.createCameraContext()
// 			console.log('=====load===')
// 			const listener = context.onCameraFrame((frame) => {
// 				console.log(frame.data instanceof ArrayBuffer, frame.width, frame.height)
// 			})
// 			listener.start({
// 				success:function(res){
// 					console.log(res);
// 					console.log("监听开始")
// 				},
// 				fail:function(res){
// 					console.log(res);
// 					console.log("监听失败")
// 				}
// 			})
// 			listener.stop({  
// 			    success: function() {  
// 			        console.log('监听已停止');  
// 			    },  
// 			    fail: function() {  
// 			        console.log('停止监听失败');  
// 			    }  
// 			});
// 		},
// 		onReady() {
// 		},
// 		methods:{
// 			kaishi(){
// 				const i=1;
// 				const that = this
// 				console.log(i);
// 				const context = uni.createCameraContext("face")
// 				console.log(context);
// 				const listener = context.onCameraFrame((frame)=>{
// 					console.log("nihao");
// 					console.log('==获取帧动画===',that.flag)
// 					console.log(frame.data instanceof ArrayBuffer, frame.width, frame.height)
// 					if (frame && that.flag) {
// 						i++;
// 						that.frameQueue.push(frame)
// 						console.log('==push任务',that.frameQueue.length)
// 						that.flag = false
// 						console.log(i++, frame.data, frame.width, frame.height)
// 					}
// 				})
// 				console.log(listener);
// 				listener.start({
// 					success:function(res){
// 						console.log("开始监听");
// 						let task = setInterval(function(){
// 							// 处理图像信息
// 							const frame = that.frameQueue.shift()
// 							console.log("开始运行===",frame,that.flag);
// 							that.flag = true;
							
// 							// // 将数据转成图片，在换格式
// 							// let pngData = UPNG.encode([frame.data], frame.width, frame.height),  
// 							//     base64 = Base64Util.arrayBufferToBase64(pngData)
								
// 							// const ses=uni.$http.post("/faceAuth",{base64});
							
// 						},2000)
// 					},
// 					fail:function(res){
// 						console.log("调用失败");
// 						console.log(res);
// 					}
// 				})
// 			}
// 		}
// 	}